<template>
  <div class="shuiweicom">
		<common id="nulll" ref='common'></common>
		<div class="copy_title">
			<div @click="select('shuiku')" :class="type=='shuiku'?'actile':''"><span>水库水位</span> </div>
			<div @click="select('hedao')" :class="type=='hedao'?'actile':''"><span>河道水位</span></div>
		</div>
		<div class="shuiwei_tl">
			<span>水势图例：</span> 
			<img src="../../../static/images/manage/zhang.png" alt="">
			<span>涨</span>
			<img src="../../../static/images/manage/luo.png" alt="">
			<span>落</span>
			<img src="../../../static/images/manage/ping.png" alt="">
			<span>平</span>
		</div>
		<div class="shuiweicons">
			<div class="tableCons clear_float">
				<div>排行</div>
				<div>测站名</div>
				<div>乡镇</div>
				<div>水位</div>
				<div>水势</div>
				<div>超警戒/讯限</div>
				<div>警戒/讯限</div>
			</div>
			<div class="tableCons clear_float" v-for="(item , index) of word" :key="index">
				<div >{{index+1}}</div>
				<div >{{item.stationName}}</div>
				<div >{{item.countyName}}</div>
				<div >{{item.level}}</div>
				<div ><img :src="imgObj[item.status]"></div>
				<div >{{item.over}}</div>
				<div >{{item.warnLevel}}</div>
			</div>
		</div>
  </div>
</template>

<script>
import topTitle from './top';
//import json from "../../assets/json/reservoirInfo.json";
import echarts from 'echarts'
import common from '../common'
export default {
    props:["msg"],
	components: {
        topTitle,common
    },
	data() {
		return {
			title:{
				name: "水位信息",
				time: "",
			},
			type:"shuiku",
			word:[],
			word1:[],
			word2:[],
			imgObj:{
				"0":"../../../static/images/manage/ping.png",
				"1":"../../../static/images/manage/luo.png",
				"2":"../../../static/images/manage/zhang.png",
			}
		}
	},
	methods:{
		refreshAll(){
			setTimeout(()=>{
				this.refreshEchartHeight();
				this.charts.resize();
			},1000)
		},
        closeThis(){
            this.$emit('closep',this.msg.name)
		},
		select(type){
			this.type=type;
			if(type=="shuiku"){
				this.word=this.word1;
			}else{
				this.word=this.word2;
			}
		},
		getData(){
			this.$ajax({method: 'get',	url: "http://172.21.129.156:8081/web/rain/countRsvrWater",}).then((res)=>{
                console.log(res);
				var data=res.data;
				this.word=data.result.slice(0,6);
				this.word1=data.result.slice(0,6);
				this.title.time=this.$refs.common.timechangeShow(data.time);
            })
            .catch(function(err){
                console.log(err)
			});
			this.$ajax({method: 'get',	url: "http://172.21.129.156:8081/web/rain/countRiverWater",}).then((res)=>{
                console.log(res);
				var data=res.data;
				this.word2=data.result.slice(0,6);
            })
            .catch(function(err){
                console.log(err)
            })
		}
    },
	mounted(){
		this.$emit('refreshTop',this.title);
		this.getData();
	}
}
</script>

<style lang="less">
.shuiweicom{
	position: relative;
	.copy_title{
		height: 49px;
		padding: 6px 0px;
		// background: #033464;
		position: absolute;
		left: 0;
		top: -50px;
		width: 220px;
		.actile{
			color: #B1FFFF;
		}
		&>div{
			float: left;
			color: #ccc;
			font-weight: bold;
			padding: 6px 10px;
			background: #02284E;
			border: 1px solid #2A5C77;
			span{
				padding: 7px 10px;
				cursor: pointer;
				font-size: 15px;
				display: inline-block;
				background: rgba(255, 255, 255, 0.1);
			}
		}
	}
	.shuiwei_tl{
		padding: 10px;
		img{
			vertical-align: top;
		}
	}
	.shuiweicons{
		&>div>div{
			float: left;
		}
		.tableCons{
			&>div{
				width: 12.5%;
				height: 100%;
				float: left;
				text-align: center;
				border-top: 1px solid rgba(255, 255, 255, 0.5);
				padding: 14px 0;
				font-size: 15px;
				&:nth-child(2){
					width: 25%;
				}
        	}
			&:first-child{
				background: rgba(59, 138, 236, 0.19);
				&>div{
					border-top: none;
				}
			}
		}
	}
}
	
</style>
